<template>
	<view class="container">
		<!-- 第一栏：logo和标题 -->
		<view class="row">
			<image src="https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/logo.png" class="logo"></image>
			<text class="title">AI创意画作</text>
		</view>

		<view class="title_name">文生图</view>
		<!-- 第二栏：下拉菜单 -->
		<!-- 		<view class="row">
			<uni-data-select v-model="selectedMode" :localdata="modes"></uni-data-select>
		</view> -->

		<!-- 第三栏：图生图上传模块 -->
		<!-- 		<view v-if="selectedMode === '图生图'" class="row">
			<uni-file-picker fileMediatype="image" :limit="1" @select="onImageSelect">
				<view class="upload-button">
					<text class="plus">+</text> 上传图片
				</view>
			</uni-file-picker>
		</view> -->

		<!-- 第四栏：文本输入框 -->
		<!-- <view class="row"> -->
		<textarea maxlength="500" placeholder="请输入您的创意描述 (最多500字)" v-model="description"
			class="text_input_name"></textarea>
		<button @click="clearInput" class="btn-clear">清空</button>
		<!-- </view> -->

		<view class="tuijian">
			<view>热门关键词推荐
				<image src="https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/refresh.png" class="refresh-btn" @click="refreshData"></image>
				<text class="refresh-btn-text" @click="refreshData">
					<!-- <uni-icons type="reload" size="15" class="refresh-icon" @click="refreshData">换一批</uni-icons> -->
					换一批</text>
			</view>

			<view class="hot-keywords">
				<text v-for="(keyword, index) in hotKeywords" :key="index"
					@click="fillInput(keyword)">{{ keyword }}</text>
			</view>
		</view>

		<!-- 第五栏：风格选项 -->
		<view class="title_name">模型主题</view>
		<scroll-view class="button-scroll" scroll-x>
			<view class="row">
				<view v-for="(style, index) in styles" :key="index" class="style-option"
					:class="selectedStyle === style.value ? 'active' : ''" @click="selectedStyle = style.value">
					<image :src="style.icon" class="style-icon"></image>
					<view class="style-text">{{ style.name }}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 第六栏：图片大小选项 -->
		<view class="title_name">画面比例</view>
		<view class="size-container">
			<view v-for="(size, index) in sizes" :key="index" class="size-option"
				:class="selectedSize === size.value ? 'active' : ''"
				@click="selectedSize = size.value, imgWidth = size.width, imgHeight = size.height">
				<image :src="size.icon" class="size-icon"></image>
				<view class="size-text">{{ size.name }}</view>
			</view>
		</view>

		<!-- 第七栏：图片张数选项 -->
		<view class="title_name">图片张数</view>
		<view class="number-container">
			<view v-for="(number, index) in numbers" :key="index" class="number-option"
				:class="selectedNumber === number.value ? 'active' : ''" @click="selectedNumber = number.value">
				<image :src="number.icon" class="number-icon"></image>
				<!-- 				<view class="number-text">{{ number.name }}</view> -->
			</view>
		</view>

		<!-- 第八栏：提交按钮 -->
		<view class="row">
			<button class="submit-button" @click="onSubmit">生成创意画作</button>
		</view>
	</view>

</template>

<script>
	import createSocket from "../../comfyui/websocket";
	import text2imgapi from "../../comfyui/workflow_api.json";

	let socket = null; // 将 WebSocket 实例放在模块作用域中

	export default {

		data() {
			return {
				hotKeywordsALL: ['书店', '运动少女', '蓬松的波浪发型',
					'卧室吊顶', '牛仔短裤', '粉色头发', '万圣节', '玄幻仙侠世界', '铁路', '城堡', '黄昏', '公园', '超高分辨率', '格子衬衫',
					'办公室', '金发', '女性', '时尚街拍', '情侣', '腹肌', '头巾', '卷发', '墨镜', '冷光', '暖光',
					'科技感', '悲伤的', '微距摄影', '空灵的风格', '夜晚', '欧洲宫廷风', '超华丽', '露肩装', '煤油灯', '光影', '影棚光',
					'大海', '短发', '高角度视角', '闭眼', '3D电影', '教室', '愤怒', '剪纸', '气球', '鸟瞰图', '男性', '下午茶',
					'城市风景', '古风', '太阳光', '夏天', '满脸皱纹', '纪实摄影', '室内渲染', '热闹街市', '背景虚化', '高细节',
					'户外旅游', '大学校园', '电影画面', '逆光', '火车站', '江南古镇', 'Q版人物', '机甲', '特写视图', '雀斑',
					'雪地', '航拍视角', '硬光', '萝莉', '汉服', '仰视', '甜美', '可爱', '水下摄影', '无表情', '超级模特', '黑发',
					'自拍', '职业装', '高画质', '商务女性', '微胖', '刺绣礼服', '风景照片', '胖嘟嘟', '公园', '严肃', '迷彩'
				],
				hotKeywords: [],
				currentStartIndex: 0,
				hotKeywordsLen: 10,
				selectedMode: '文生图',
				modes: [{
						value: '文生图',
						text: '文生图',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/logo.png'
					},
					// {
					// 	value: '图生图',
					// 	text: '图生图',
					// 	icon: '/static/icons/image_to_image.png'
					// }
				],
				selectedImage: null,
				description: '',
				imageUrl: '',

				selectedStyle: 'style1',
				styles: [{
						value: 'style1',
						name: '风格一',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style1.jpeg'
					},
					{
						value: 'style2',
						name: '风格二',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style2.jpeg'
					},
					{
						value: 'style3',
						name: '风格三',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style3.jpeg'
					},
					{
						value: 'style4',
						name: '风格四',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style4.jpeg'
					},
					{
						value: 'style5',
						name: '风格五',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style5.jpeg'
					},
					{
						value: 'style6',
						name: '风格六',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style6.jpeg'
					},
					{
						value: 'style7',
						name: '风格七',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/style7.jpeg'
					}
				],
				selectedSize: '1:1',
				imgWidth: '512',
				imgHeight: '512',
				sizes: [{
						value: '1:1',
						name: '1:1',
						width: '512',
						height: '512',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/size_1x1.png'
					},
					{
						value: '16:9',
						name: '16:9',
						width: '960',
						height: '540',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/size_16x9.png'
					},
					{
						value: '9:16',
						name: '9:16',
						width: '540',
						height: '960',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/size_9x16.png'
					}
				],
				selectedNumber: '1',
				numbers: [{
						value: '1',
						name: '1',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/number_1.png'
					},
					{
						value: '2',
						name: '2',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/number_2.png'
					},
					{
						value: '4',
						name: '4',
						icon: 'https://mp-6adf0f4d-4bdf-4198-be11-505bbced7f64.cdn.bspapp.com/icons/number_4.png'
					}
				]
			}
		},
		onLoad() {
			socket = createSocket('https://ms724859lw2.vicp.fun', {
				reconnection: true, // 启用重连
				reconnectionDelay: 1000, // 重连间隔时间
				reconnectionAttempts: Infinity, // 重连次数
				transports: ['websocket'], // 仅使用WebSocket传输
			});

			this.hotKeywords = this.hotKeywordsALL.slice(0, this.hotKeywordsLen);
			this.currentStartIndex = this.hotKeywordsLen;
		},
		onUnload() {
			// 在组件销毁时关闭 WebSocket 连接
			if (socket) {
				socket.close();
				socket = null;
			}
		},
		methods: {
			refreshData() {
				// 这里实现数据的刷新逻辑
				console.log('刷新数据...');
				this.hotKeywords = this.hotKeywordsALL.slice(this.currentStartIndex, this.currentStartIndex + this
					.hotKeywordsLen);
				this.currentStartIndex += this.hotKeywordsLen;
				if (this.currentStartIndex > this.hotKeywordsALL.length) {
					this.currentStartIndex = 0;
				}
				// 例如请求新的数据并更新组件的数据
			},

			fillInput(keyword) {
				// 如果输入框没有内容，或者最后一个字符不是空格，则添加一个空格
				if (this.description && this.description[this.description.length - 1] !== ' ') {
					this.description += ' ';
				}
				// 追加关键词并添加空格
				this.description += `${keyword} `;
			},

			clearInput() {
				this.description = '';
			},

			onImageSelect(e) {
				this.selectedImage = e.tempFilePaths[0];
			},

			getClientId() {
				const systemInfo = uni.getSystemInfoSync();
				const timestamp = Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
				return `${systemInfo.model}-${systemInfo.system}-${timestamp}`;
			},

			onSubmit() {
				// TODO: 提交数据到后端进行图像生成
				//打包数据
				console.log(Date.now());
				console.log(this.description); // 这里打印输入框的值
				text2imgapi[6].inputs.text = this.description;
				text2imgapi[3].inputs.seed = Date.now();
				console.log("selectdNumber", this.selectedNumber);
				text2imgapi[5].inputs.width = this.imgWidth;
				text2imgapi[5].inputs.height = this.imgHeight;
				console.log("width", this.imgWidth);
				text2imgapi[5].inputs.batch_size = this.selectedNumber;
				let id = this.getClientId();
				console.log(id);
				let sdata = {
					client_id: id,
					prompt: text2imgapi,
					api: "文生图"
				};

				// 发送指令
				socket.emit('draw', sdata);

				//跳转页面，传递对象
				uni.navigateTo({
					url: '/pages/create/picture_display/picture_display',
					success: (res) => {
						// 使用 eventChannel 将 socket 对象的关键信息传递给 picture_display 页面
						res.eventChannel.emit('socketInfo', {
							// 传递 socket 对象的关键信息，例如 client_id
							client_id: id
						});
					},
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.text_input_name {
		padding: 20rpx;
	}

	.refresh-btn {
		width: 30rpx;
		height: 30rpx;
		padding-left: 40rpx;
		padding-right: 10rpx;
	}

	.title_name {
		font-size: 40rpx;
		font-weight: bold;
		padding: 20rpx;
	}

	.hot-keywords {
		display: flex;
		flex-wrap: wrap;
		padding: 15rpx;
	}

	.tuijian {
		margin: 20rpx;
		font-size: 30rpx;
		color: #646464;
	}

	.hot-keywords text {
		font-size: 25rpx;
		margin: 5px;
		padding: 5px;
		background-color: #f0f0f0;
		color: #646464;
		border: 1px solid #ddd;
		border-radius: 5px;
		cursor: pointer;
	}

	.row {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
	}

	.upload-button {
		/*  border: 1rpx dashed #ccc;
  border-radius: 10rpx; */
		padding: 20rpx;
		text-align: center;
	}

	.plus {
		font-size: 48rpx;
		font-weight: bold;
	}

	.button-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.btn-clear {
		font-size: 30rpx;
		width: 120rpx;
		height: 80rpx;
		margin-right: 30rpx;
	}

	.style-option {
		margin-right: 20rpx;
		text-align: center;
		cursor: pointer;
	}

	.style-icon {
		width: 180rpx;
		height: 180rpx;
	}

	.style-text {
		font-size: 25rpx;
		margin-top: 10rpx;
	}

	.number-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.number-option {
		width: calc(33.33% - 10px);
		/* Adjust according to your needs */
		margin-bottom: 10px;
		/* Adjust according to your needs */
	}

	.number-icon {
		padding: 44rpx;
		width: 140rpx;
		height: 140rpx;
	}

	.size-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.size-option {
		width: calc(33.33% - 10px);
		/* Adjust according to your needs */
		margin-bottom: 10px;
		/* Adjust according to your needs */
	}

	.size-icon {
		padding: 44rpx;
		width: 140rpx;
		height: 140rpx;
	}

	.size-text {
		font-size: 35rpx;
		padding-left: 80rpx;
		padding-right: 80rpx;
		padding-bottom: 10rpx;
	}

	.active {
		border: 5rpx solid #007aff;
		border-radius: 10rpx;
	}

	.submit-button {
		width: 100%;
		background-color: #007aff;
		color: #fff;
	}
</style>